<template>
  <a-form-item :name="formItem.name" :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" :class="formItem.associated
      ? 'form-a-radio-group_associated'
      : 'form-a-editor'
      ">
    <span class="beforeText upload-pic" v-if="formItem.beforeText">{{
      formItem.beforeText
    }}</span>
    <a-form-item-rest>
      <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          <UEditor ref="editor" v-model="formItem.value"
            :options="{ initialFrameHeight: initialFrameHeight, initialFrameWidth: initialFrameWidth }"></UEditor>

        </a-tab-pane>
      </a-tabs>
    </a-form-item-rest>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </a-form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue"
import UEditor from "@/components/editor/UEditor.vue";
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';

//data
let initialFrameHeight = 20
let initialFrameWidth = '100%'

//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType,
  },
});
const panes = ref<{ title: string; content: string; key: string; closable?: boolean }[]>([
  { title: '正文1', content: 'Content of Tab 1', key: '1', closable: false },
  { title: '正文2', content: 'Content of Tab 2', key: '2' },
  { title: '正文3', content: 'Content of Tab 3', key: '3', },
]);

const activeKey = ref(panes.value[0].key);

const newTabIndex = ref(0);

const add = () => {
  activeKey.value = `newTab${++newTabIndex.value}`;
  panes.value.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey.value });
};

const remove = (targetKey: string) => {
  let lastIndex = 0;
  panes.value.forEach((pane, i) => {
    if (pane.key === targetKey) {
      lastIndex = i - 1;
    }
  });
  panes.value = panes.value.filter(pane => pane.key !== targetKey);
  if (panes.value.length && activeKey.value === targetKey) {
    if (lastIndex >= 0) {
      activeKey.value = panes.value[lastIndex].key;
    } else {
      activeKey.value = panes.value[0].key;
    }
  }
};

const onEdit = (targetKey: string | MouseEvent, action: string) => {
  if (action === 'add') {
    add();
  } else {
    remove(targetKey as string);
  }
};

const formItem = ref(props.formItem as any);
useColumnItem(computed(() => props.formItem), formItem)

</script>

<style lang="less" scoped>
.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}

.form-a-editor {
  ::v-deep(.ant-form-item-control) {
    max-width: '' px !important;
  }
}
</style>
